/*
* @Author: Yejing
* @Date: 2023-05-29 17:16:44
* @LastEditors: Yejing
* @LastEditTime: 2023-06-16 17:08:06
* @Description: 搜索类型
*/

<template>
    <view class="search-type" :style="{'height':searchType.height}">
        <!-- 分类栏目 -->
        <slideTab ref="mytab" @change="tabChange" :tabList='searchType.tabList'></slideTab>
        <!-- 主内容 -->
        <view class="search-type-info">
            <swiper class="main-info" :duration="600" :current="curTabIndex" @change="noticeHandle">
                <slot v-for="(i,index) in searchType.tabList" :name="index"></slot>
            </swiper>
        </view>
    </view>

</template>

<script>
export default {
    props: {
        searchType: {
            type: Object,
            default: () => ({
                //table数据
                tabList: [],
                //容器高度
                height: ''

            })
        }
    },
    data() {
        return {
            curTabIndex: 0
        }
    },
    onLoad() {
    },
    methods: {
        //获取下标
        tabChange(index) {
            this.curTabIndex = index;
        },
        //滑动
        noticeHandle(e) {
            this.$refs.mytab.tabChange(e.target.current);
            this.$emit('noticeHandle',e.target.current)
        },
        stopTouchMove() {
            return false;
        },
    }
}
</script>

<style lang="scss">
.search-type {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 184rpx);
}

/* #ifdef APP-PLUS */
.search-type {
  height: calc(100vh - 220rpx);
}

/* #endif */


.search-type-info {
  flex: 1;

  .main-info {
    height: 100%;

  }

  .info-item {
    padding: 0 28rpx;
    height: 80rpx;
    font-size: 24rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #e5e5e5;
  }
}
</style>
